<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影评论</title>
    <%- include common %>
</head>

<body>
    <%- include('head',{title:'mlist',username}) %>


    <!-- <p>页面创建成功</p> -->
    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
                <h2 class="text-danger  text-left">评论列表</h2>
                <table style="width:100%" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr class="text-center text-danger">
                            <td>序号</td>
                            <td>评论人</td>
                            <td>评论标题</td>
                            <td>评论内容</td>
                            <td>电影名称</td>
                            <td>评论电影</td>
                            <td>时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <%  if(result.length>0){  %>
                        <%    result.map((item,idx)=>{  %>
                        <tr class="text-center">
                            <td><%- idx+1 %></td>
                            <td><a href="/comment/htmlEjs/userc?author=<%- item.author %>"><%- item.author %> <span
                                        class="text-danger"> <%- username == item.author ? '楼主':'' %>
                                    </span></a></td>
                            <td style="width:120px;word-break: break-all;"><a
                                    href="/comment/htmlEjs/cdetail?_id=<%- item._id %>"><%- item.title %></a></td>
                            <td style="width:300px;word-break: break-all;"><%- item.content %></td>
                            <td><%- item.movie.title %></td>
                            <td>
                                <a href="/comment/htmlEjs/filmc?mid=<%- item.mid%>">
                                    <img width="80px" height="80px"
                                        src="<%- item.movie.images.large.replace(/img7/,'img3')%>" alt=""></a></td>
                            <td><%- item.time %></td>
                            <td style="width:240px;">
                                <button class="btn btn-success" data-item='<%- JSON.stringify(item) %>'   onclick="showThisAnswer(this)"  data-toggle="modal" data-target="#showanswer">查看回复</button>

                                <%    if(username==item.author){  %>
                                <button class="btn btn-info" onclick="window.location.href='/comment/htmlEjs/updatec?_id=<%- item._id %>'">修改</button>
                                <button class="btn btn-danger" onclick="getDelId('<%- item._id %>')"  data-toggle="modal" data-target="#delbox">删除</button>
                                <%    }   %>

                            </td>
                        </tr>
                        <%    })  %>
                        <tr>
                            <td colspan="8">
                                <button class=" disabled btn btn-danger pull-right">删除所有</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li>
                                            <a href="/comment/htmlEjs/mlist?page=<%- page - 1 %>&size=<%- size%>"
                                                aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li><a
                                                href="/comment/htmlEjs/mlist?page=<%- page -2  %>&size=<%- size%>"><%- page-2  %></a>
                                        </li>
                                        <li><a
                                                href="/comment/htmlEjs/mlist?page=<%- page -1  %>&size=<%- size%>"><%- page-1 %></a>
                                        </li>
                                        <li class="active "><a
                                                href="/comment/htmlEjs/mlist?page=<%- page %>&size=<%- size%>">
                                                <%- page %></a></li>
                                        <li><a
                                                href="/comment/htmlEjs/mlist?page=<%- page + 1 %>&size=<%- size%>"><%- page + 1 %></a>
                                        </li>
                                        <li><a href="/comment/htmlEjs/mlist?page=<%- page + 2 %>&size=<%- size%>"><%- page + 2 %>
                                            </a></li>
                                        <li>
                                            <a href="/comment/htmlEjs/mlist?page=<%-page + 1 %>&size=<%- size%>"
                                                aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </td>
                        </tr>

                        <%    }  %>


                    </tbody>
                </table>
            </div>

        </div>


        <div class="modal fade" tabindex="-1" role="dialog" id="showanswer">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">来自网友的回复 -- <span class="text-danger" id="mtitle">熔炉</span></h4>
                        <h6 id="thistitle"></h6>
                    </div>
                    <div class="modal-body" id="answerlist">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="gotodetail"
                            onclick="gotodetail(this)">添加回复</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">删除评论</h4>
                    </div>
                    <div class="modal-body">
                        <p>你确定要删除这条评论吗?</p>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="delsubmit()">确定删除</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


    </div>


    <%- include foot %>



    <script>


        function showThisAnswer(that){

            //如果要通过函数来传递数据，用id传递不出来，所以我们通过函数保存住this，然后利用this找到后端传来的数据，渲染页面，并把一些数据传给后端

            var item = JSON.parse($(that).attr('data-item'))


            $('#mtitle').html(item.movie.title);
            $("#thistitle").html(item.title);
            $('#answerlist').html('');
            $('#gotodetail').attr('data-id',item._id);
            var oDiv = '';
            item.answer&&item.answer.forEach((val,i)=>{
                oDiv += `
                    <div style="display: flex;justify-content: space-between;">
                        <p class=" text-warning"> #  ${val.id+1} </p>
                        <p> 来自:${val.author?val.author :'佚名'}</p>
                        
                    </div>
                    <div style="display: flex;justify-content: space-between;border-bottom:1px dashed red;padding-bottom:5px">
                        <p class=" text-danger"> 内容 :${val.subtitle}</p>
                        <p class=" text-warning"> 时间 :${val.time}</p>
                    </div>
        
                `
            })
            $('#answerlist').html(oDiv?oDiv:'暂无网友回复')


        }


        function gotodetail(that){
            // console.log(111);
            //点击跳转回复评论界面
            window.location.href = "/comment/htmlEjs/cdetail?_id="+$(that).attr("data-id")
        }



        // 点击删除按钮时获取要删除的那一条评论的id
        var item_id = null;
        function getDelId(_id){
            item_id = _id
        }

        //把点击删除按钮获得的id传给后端，后端做出相应的删除
        function delsubmit(){
            $.ajax({
                url:'/comment/htmlEjs/delc',
                method:"POST",
                data:{
                    _id:item_id
                },
                success:function(res){
                    console.log(res);
                    if(res.code == 200){
                        window.location.reload();
                    }
                }
            })
        }

    </script>
</body>

</html>